<template>
  <div class="container">
    <div class="login">
      <img class="logo" :src="logo" alt="">
      <div class="title">欢迎登录</div>
      <Form ref="fields" :model="fields" :rules="rules" class="form-box">
        <FormItem prop="username">
          <Input type="text" v-model="fields.username" icon="android-person" placeholder="用户名"></Input>
        </FormItem>
        <FormItem prop="password">
          <Input type="password" v-model="fields.password" icon="locked" placeholder="密码"></Input>
        </FormItem>
        <Button type="error" @click="formSubmit('fields')" long>登录</Button>
      </Form>
      <div class="copyright">Copyright © 2017-2019 KoxShop 版权所有.</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      logo: "../../static/logo.png",
      fields: {
        username: "",
        password: ""
      },
      rules: {
        username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
        password: [{ required: true, message: "密码不能为空", trigger: "blur" }]
      }
    }
  },
  methods: {
    formSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success("提交成功!")
        } else {
          this.$Message.error("表单验证失败!")
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  background-image: linear-gradient(208deg, #FFFE9F 0%, #FCA180 88%);
}
.login {
  width: 300px;
  margin: 0 auto;
}
.logo {
  display: block;
  margin: 0 auto;
  padding: 35px;
}
.title {
  width: 100px;
  margin: 0 auto;
  text-align: center;
  color: #ed3f14;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #ed3f14;
}
.form-box {
  margin-top: 40px;
}
.copyright {
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #f3f3f3;
}
</style>
